import {Component, ComponentProps, VueComponent, Mut, Computed} from "vue3-oop";
import {NForm, NFormItemGi, NGrid, NInputGroup,NInputGroupLabel,NInput,NButton, NSelect, NCheckbox} from "naive-ui";
import BpmnModeler from '../../../BpmnModeler';
import styles from './index.module.scss';

interface IProps {
  bpmnModeler: BpmnModeler,
}
@Component()
export default class UserTaskPanel extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    bpmnModeler: {},
  }

  public static tabKey = "UserTaskPanel"
  public static tabName = "任务配置"

  @Mut() private state = {
    // 是否异步
    async: 'false',
    // 是否独占
    exclusive: 'false',
    // 是否补偿
    isForCompensation: 'false',
    // 分类
    category: '',
    // 到期时间
    dueDate: '',
    // 优先级
    priority: '',
    // 跳过表达式
    skipExpression: '',
    // 处理用户
    assignee: '',
    // 候选用户
    candidateUsers: '',
    // 候选分组
    candidateGroups: '',
    // 默认流转
    default: '',
  }

  private setConfigValues = (config:any)=>{
    this.props.bpmnModeler.selectedCell.updateData(config);
  }

  private getConfigValues = ()=>{
    const { selectedCell } = this.props.bpmnModeler;
    this.state.async = selectedCell.data?.async || 'false';
    this.state.exclusive = selectedCell.data?.exclusive || 'false';
    this.state.isForCompensation = selectedCell.data?.isForCompensation || 'false';
    this.state.category = selectedCell.data?.category || '';
    this.state.dueDate = selectedCell.data?.dueDate || '';
    this.state.priority = selectedCell.data?.priority || '';
    this.state.skipExpression = selectedCell.data?.skipExpression || '';
    this.state.assignee = selectedCell.data?.assignee || '';
    this.state.candidateUsers = selectedCell.data?.candidateUsers || '';
    this.state.candidateGroups = selectedCell.data?.candidateGroups || '';
    this.state.default = selectedCell.data?.default || '';
  }

  private updateAsync=(value:string)=>{
    this.state.async = value;
    this.setConfigValues({ async: this.state.async });
  }

  private updateExclusive=(value:string)=>{
    this.state.exclusive = value;
    this.setConfigValues({ exclusive: this.state.exclusive });
  }

  private updateIsForCompensation=(value:string)=>{
    this.state.isForCompensation = value;
    this.setConfigValues({ isForCompensation: this.state.isForCompensation });
  }

  private updateCategory = (value:string)=>{
    this.state.category = value;
    this.setConfigValues({ category: this.state.category });
  }

  private updateDueDate=(value:string)=>{
    this.state.dueDate = value;
    this.setConfigValues({ dueDate: this.state.dueDate });
  }

  private updatePriority=(value:string)=>{
    this.state.priority = value;
    this.setConfigValues({ priority: this.state.priority });
  }

  private updateSkipExpression=(value:string)=>{
    this.state.skipExpression = value;
    this.setConfigValues({ skipExpression: this.state.skipExpression });
  }

  private updateAssignee=(value:string)=>{
    this.state.assignee = value;
    this.setConfigValues({ assignee: this.state.assignee });
  }

  private updateCandidateUsers=(value:string)=>{
    this.state.candidateUsers = value;
    this.setConfigValues({ candidateUsers: this.state.candidateUsers });
  }

  private updateCandidateGroups=(value:string)=>{
    this.state.candidateGroups = value;
    this.setConfigValues({ candidateGroups: this.state.candidateGroups });
  }

  private updateDefault=(value:string)=>{
    this.state.default = value;
    this.setConfigValues({ default: this.state.default });
  }

  private getFlowOptions=()=>{
    const { bpmnModeler } = this.props;
    const options = [] as any[];
    bpmnModeler.getGraph().getOutgoingEdges(bpmnModeler.selectedId)?.forEach((edge)=>{
      const label = (edge as any).label as string || edge.id;
      options.push({value:edge.id,label:label});
    })
    return options;
  }

  render(){
    this.getConfigValues();
    return(
      <NForm labelPlacement="left" labelWidth={100}>
        <NGrid cols={2} xGap={20}>
          <NFormItemGi label="是否异步"><NSelect options={[{value:'true',label:'是'},{value:'false',label:'否'}]} value={this.state.async} onUpdateValue={this.updateAsync} /></NFormItemGi>
          <NFormItemGi label="是否独占"><NSelect options={[{value:'true',label:'是'},{value:'false',label:'否'}]} value={this.state.exclusive} onUpdateValue={this.updateExclusive} /></NFormItemGi>
          <NFormItemGi label="是否补偿"><NSelect options={[{value:'true',label:'是'},{value:'false',label:'否'}]} value={this.state.isForCompensation} onUpdateValue={this.updateIsForCompensation} /></NFormItemGi>
          <NFormItemGi label="分类"><NInput value={this.state.category} onUpdateValue={this.updateCategory}/></NFormItemGi>
          <NFormItemGi label="到期时间"><NInput value={this.state.dueDate} onUpdateValue={this.updateDueDate}/></NFormItemGi>
          <NFormItemGi label="优先级"><NInput value={this.state.priority} onUpdateValue={this.updatePriority}/></NFormItemGi>
          <NFormItemGi label="跳过表达式"><NInput value={this.state.skipExpression} onUpdateValue={this.updateSkipExpression}/></NFormItemGi>
          <NFormItemGi label="处理用户"><NInput value={this.state.assignee} onUpdateValue={this.updateAssignee}/></NFormItemGi>
          <NFormItemGi label="候选用户"><NInput value={this.state.candidateUsers} onUpdateValue={this.updateCandidateUsers}/></NFormItemGi>
          <NFormItemGi label="候选分组"><NInput value={this.state.candidateGroups} onUpdateValue={this.updateCandidateGroups}/></NFormItemGi>
          <NFormItemGi label="默认流转"><NSelect options={this.getFlowOptions()} value={this.state.default} onUpdateValue={this.updateDefault} /></NFormItemGi>
        </NGrid>
      </NForm>
    )
  }
}